<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<link href="#springUrl('/static/css/bootstrap.min.css')" rel="stylesheet">
	<link href="#springUrl('/static/css/style.css')" rel="stylesheet">
    <link href="#springUrl('/static/css/jquery-ui.css')" rel="stylesheet">
</head>
<body class="white-bg">
<div class="ibox-content" style="width: 430px;">
   <form id="myForm" class="form-horizontal" autocomplete="off" data-validator-option="{theme:'default'}">
       <div class="form-group"><label class="col-sm-2 control-label">商品名称</label>
      		<div class="col-sm-10">
                <input type="hidden" class="form-control" value="$!{sample.id}" name="id"  />
                <input type="hidden" name="itemId" value="$!{sample.itemId}" id="itemId"/>
			    <input type="text" readonly class="form-control" value="$!{sampleItemName}" name="itemName" id="itemName" />
                <a class="btn"  onclick="openItemSearch('itemId','itemName')">选择商品</a>
      		</div>
       </div>
       <div class="form-group"><label class="col-sm-2 control-label">开始日期</label>
           <div class="col-sm-10">
               <input type="text" id="startDate"  class="form-control" value="$!{sample.startDate}" name="startDate" />
           </div>
       </div>
       <div class="form-group"><label class="col-sm-2 control-label">结束日期</label>
           <div class="col-sm-10">
               <input type="text" id="endDate" class="form-control" value="$!{sample.endDate}" name="endDate"  />
           </div>
       </div>
       <div class="form-group"><label class="col-sm-2 control-label">商品数量</label>
           <div class="col-sm-10">
               <input type="text" class="form-control" value="$!{sample.itemCount}" name="itemCount"  />
           </div>
       </div>
       <div class="form-group"><label class="col-sm-2 control-label">试用商品图片</label>
           <!--<div class="col-sm-10">
               <input type="file" class="form-control"  id="picture" accept=".gif,.jpg,.jpeg,.png"  >
               <input type="hidden" class="form-control" id="sampleImageAddr" name="sampleImageAddr"  >
           </div>-->
           <div class="col-sm-10">
               <input id="sampleImage" type="file" style="display:none"/>
               <input name="sampleImageAddr" type="hidden" value="$!{sample.sampleImageAddr}"/>
               <a id="sampleImageView">$!{sample.sampleImageAddr}</a>
               <br/>
               <a class="btn" onclick="$('#sampleImage').click();">选择图片文件</a>
               <a class="btn" onclick="removeImage('sampleImageView','sampleImageAddr')">清空</a>
           </div>
       </div>
        <div class="form-group">
            <div class="text-center">
                <button class="btn btn-primary" type="submit">#if($!{sample})修 改#else提 交#end</button>
            </div>
        </div>
    </form>
</div>
<script src="#springUrl('/static/js/jquery-2.1.1.js')"></script>
<script src="#springUrl('/static/plugins/nice-validator-0.8.1/jquery.validator.js?local=zh-CN')"></script>
<script src="#springUrl('/static/js/jquery-ui.custom.min.js')"></script>
<script src="#springUrl('/static/js/jquery-ui-1.10.4.min.js')"></script>
<script src="#springUrl('/static/js/itemSelect.js')"></script>
<script src="#springUrl('/static/plugins/layer-v2.2/layer/layer.js')"></script>
<script src="#springUrl('/static/js/common.js')"></script>

<script type="text/javascript">
    $(function(){
        $( "#startDate" ).datepicker();
        $( "#endDate" ).datepicker();
    });

$("#myForm").validator({
    valid: function(form){
        var me = this;
        // 提交表单之前，hold住表单，防止重复提交
        me.holdSubmit();
        $.ajax({
        	url: "#springUrl('/operate/sample/editShopSample')",
            data: $(form).serialize(),
            type: "POST",
            success: function(data){
            	var d = JSON.parse(data);
                if(d.success && d.data){
                	window.parent.location.reload();
                	//当你在iframe页面关闭自身时
                	//var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                	//parent.layer.close(index); //再执行关闭   
                } else {
                	//失败，提交表单成功后，释放hold，如果不释放hold，就变成了只能提交一次的表单
                    me.holdSubmit(false);
                }
            }
        });
    }
});

    $("#sampleImage").change(function(event){
        layer.load();
        var e = event;
        var type = e.target.files[0].type;//格式
        type = type.split("/")[1];
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                var bate64 = this.result//这个就是base64的数据了
                bate64 =bate64.split(",")[1];
                $.ajax({
                    type: 'POST',
                    url: "http://h5.ciaotalking.com/upload/UploadServlet",
                    dataType: "json",
                    data:{"imgStr":bate64,"postfix":type},
                    success: function(data){
                        $("#sampleImageView").html(data.content);
                        $("*[name='sampleImageAddr']").val(data.content);
                        layer.closeAll('loading');
                    },
                    error: function(){
                        layer.closeAll('loading');
                    }
                });
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    });

    function removeImage(aId,iName){
        var $a =  $("#"+aId);
        $a.html("");
        /*$("*[name="+iName+"]").val();
         if (aId == "posterImageView" && $("#posterImageAddrAddBtn").hasClass("OverFiveImage")){
         $("#infoImageAddrsAddBtn").removeClass("OverFiveImage");
         $("#infoImageAddrsAddBtn").show();
         }*/
    }

    $("#picture").change(function(){
        addPicture(event);
    });

    function addPicture(e) {//上传图片
        var UploadServlet = "http://h5.ciaotalking.com/upload/UploadServlet";
        console.info(e.target.files[0]);//图片文件
        var type = e.target.files[0].type;//格式
        type = type.split("/")[1];
        console.log(type)
        var dom =$("input[id^='picture']")[0];
        //console.info(dom.value);//这个是文件的路径 C:\fakepath\icon (5).png
        //console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
        var reader = new FileReader();
        reader.onload = (function (file) {
            return function (e) {
                var bate64 = this.result//这个就是base64的数据了
                bate64 =bate64.split(",")[1];
                /*$("#showImage")[0].src=this.result;*/
                $.ajax({
                    type: 'POST',
                    url: UploadServlet,
                    dataType: "json",
                    data:{"imgStr":bate64,"postfix":type},
                    success: function(data){
                        console.log(data.content);
                        $("#sampleImageAddr").val(data.content);
                        /*$("#showImage").attr("src",data.content);*/
                    },
                    error: function(){

                    }
                });
            };
        })(e.target.files[0]);
        reader.readAsDataURL(e.target.files[0]);
    }

    $("#sampleImageView").click(function(){
        var para =  $("#sampleImageView").html();
        layer.open({
            type: 2,
            title: "查看试用大图",
            shadeClose: false,
            shade: 0,
            area: ['400px', '400px'],
            fix: false,
            maxmin: true,
            content: "#springUrl('/item/viewImg')?imgAddrs="+para+"&scale=100"
        });
    });
</script>
</body>
</html>
